<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<%
    String realPath = "http://" + request.getServerName() + ":"
					+ request.getServerPort() + request.getContextPath();
%>
<%
    String path = "http://" + request.getServerName() + ":"
					+ request.getServerPort();
%>

<html>
<head>
<title>图片信息</title>
<script type="text/javascript">
	var oldids = new Array();
	var newids = new Array();
	var items = $(".gridly div", navTab.getCurrentPanel());
	//根据ponsition 和 size大小
	var items = $(".gridly div", navTab.getCurrentPanel());
	var minwidth = ('${minWidth}' == '' ? 200 : '${minWidth}');
	var minheight = ('${minHeight}' == '' ? 200 : '${minHeight}');
	var splitsize = ('${splitSize}' == '' ? 10 : '${splitSize}');
	var columnCount = ('${columnCount}' == '' ? 5 : '${columnCount}');
	var isDraggable = false;
	var isEditable = ('${isEditable}' == 'false') ? false : true;
	var navEditable = ('${navEditable}' == 'false') ? false : true;
	var refreshSort = ('${refreshSort}' == '1') ? true : false;

	//结束拖动
	var reordered = function($elements, event) {
		//存储排序后的数据
		elements = $elements;
		if (isEditable) {
			if (!isDraggable) {
				//替换内容
				replaceItems($elements, event);
				newids = refreshIds(newids);
			} else {
				newids = new Array([ 0 ]);
			}
			if (newids.join() != oldids.join()) {
				$("#popupMsg", navTab.getCurrentPanel()).show().animate({
					height : '100px'
				});
			}
		}
	};

	var gridlyCallback = function() {
		gridly(minwidth, splitsize, columnCount, isEditable && isDraggable,
				reordered);
		if (refreshSort) {
			resetSort('${panelId}');
		}
	};

	$(document).ready(
			function() {

				itemInitPositionAndSize(items, minwidth, minheight, splitsize,
						gridlyCallback);

				$("#ext", navTab.getCurrentPanel()).css({
					"width" : minwidth + 'px',
					"height" : minheight + 'px'
				});
                
				panelItem_initHoverEvent();
				
				var total = $("#total").val();
				var page = $("#page").val();
				var num = $("#num").val();
				if (total > page * num) {
					$("#ext").remove();
				}
			});

	function panelPreview_initHoverEvent() {
		$('.boxgrid.caption', navTab.getCurrentPanel()).hover(function() {
			$(".preview", this).show().animate({
				top : '0px'
			});
			$(".topcover1", this).show().animate({
				bottom : '0px'
			});
		}, function() {
			$(".preview", this).hide();
		});
	}

	function panelItem_initHoverEvent() {
		$('.boxgrid.caption', navTab.getCurrentPanel()).hover(function() {
			$(".topcover", this).show().animate({
				top : '0px'
			});
			$(".topcover1", this).show().animate({
				bottom : '0px'
			});
		}, function() {
			$(".topcover", this).hide();
		});
	}

	function panelItemPool_delete(obj) {
		$(obj).parent().parent().parent().remove();
		$("#butt", navTab.getCurrentPanel()).show();
	}
	function openDwzDialog() {
		// 打开dialog 长度
		$("#dynaDwzDialog", navTab.getCurrentPanel()).attr({
			'height' : '300',
			'width' : '500'
		});
		$("#dynaDwzDialog", navTab.getCurrentPanel()).click();
		return false;
	}

	function savePanelItemSort_pool(value) {
		var panelId = value;
		if (newids.length == 0 || newids.join() == oldids.join()) {
			alertMsg.warn("没有做任何修改");
			return false;
		}
		var array = new Array();
		$(elements).each(function(a, b) {
			var $b = $(b);
			if (parseInt(b.id)) {
				//算出top 和 left 值
				bTop = parseInt($b.position().top / minheight);
				bLeft = parseInt($b.position().left / minwidth);
				var wh = $b.attr("size").split(",");
				array.push({
					"relId" : parseInt(b.id),
					"sortNum" : a + 1,
					"left" : bLeft + 1,
					"top" : bTop + 1,
					"width" : parseInt(wh[0]),
					"height" : parseInt(wh[1])
				});
			}
		})
		ajaxTodo("extPanelItemPool/resetItemSort?json=" + $.toJSON(array)
				+ "&panelId=" + panelId);
	}
	function resetSort(panelId) {
		var array = new Array();
		$(".gridly div", navTab.getCurrentPanel()).each(function(a, b) {
			var $b = $(b);
			if (parseInt(b.id)) {
				//算出top 和 left 值
				bTop = parseInt($b.position().top / minheight);
				bLeft = parseInt($b.position().left / minwidth);
				var wh = $b.attr("size").split(",");
				array.push({
					"relId" : parseInt(b.id),
					"sortNum" : a + 1,
					"left" : bLeft + 1,
					"top" : bTop + 1,
					"width" : parseInt(wh[0]),
					"height" : parseInt(wh[1])
				});
			}
		})
		$.post("extPanelItemPool/resetItemSort?json=" + $.toJSON(array)
				+ "&panelId=" + panelId);
	}

	function refreshIds(array) {
		array = new Array();
		$(".gridly div", navTab.getCurrentPanel()).each(function() {
			array.push(this.id);
		});

		return array;
	}
</script>
</head>
<body>
	<a id="dynaDwzDialog" href="picture/add" style="display: none;"
		target="dialog" mask="true" rel="dialog4" height="300" width="500"
		title="编辑该项"> </a>
	<form id="pagerForm" method="post" action="picture/list">
		<input type="hidden" name="pageNum" value="${pageNum}" /> <input
			type="hidden" name="numPerPage" value="${numPerPage}" /> <input
			type="hidden" id="total" value="${totalCount}" /> <input
			type="hidden" id="page" value="${pageNum}" /> <input type="hidden"
			id="num" value="${numPerPage}" />
	</form>
	<div class="pageHeader">
		<div class="searchBar">
			<table class="searchContent">
				<tr>
					<td>&nbsp</td>
				</tr>
			</table>
		</div>
	</div>
	<div class="pageContent scroll" layoutH="84px">
		<div style="height: 430px !important; width: 100%;" class="gridly">
			<c:forEach var="picture" items="${pictureList}">
				<div class="boxgrid caption" id="${picture.id}" size="1,1">
					<c:set var="imageUrl" value="${picture.picUrl}" />
					<img src="${empty imageUrl? 'static/images/index.png': imageUrl}" />

					<span class="topcover cover boxcaption" style="display: none">
						<p
							style="overflow: hidden; text-overflow: ellipsis; text-align: center">
							<a style="float: left;" title="确定要删除该图片项？" target="ajaxTodo"
								href="picture/delete?id=${picture.id}"
								callback="panelItemPool_navTabAjax">删除</a> <a
								style="float: right;" title="编辑该图片信息"
								href="picture/edit?id=${picture.id}" target="dialog" mask="true"
								rel="pool_dialog3" height="300" width="500"> 编辑</a>

						</p>
					</span> <span class="topcover1 cover boxcaption"
						style="height: 40px; display: block;; bottom: 0px">
						<p
							style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; text-align: center"
							align="center">${picture.name}</p>
					</span>

				</div>
			</c:forEach>
			<div id="ext" class="boxgrid caption" size="1,1">
				<img src="${'static/images/add.png'}" onclick="openDwzDialog()" />
				<span class="topcover cover boxcaption" style="display: none">
					<p
						style="overflow: hidden; text-overflow: ellipsis; text-align: center">
					</p>
				</span>

			</div>
		</div>
	</div>
	<div class="panelBar">
		<div class="pages">
			<span>共${totalCount}条 </span>
		</div>
		<div id="pagination" class="pagination" targetType="navTab"
			totalCount="${totalCount}" numPerPage="${numPerPage}"
			pageNumShown="10" currentPage="${pageNum}"></div>
		<!---->
	</div>
</body>
</html>